{% extends 'base.html' %}

{% block styles %}
  {{ super() }}
  <link href="{{ url_for_static('static', filename='plugins/bootstrap-table/bootstrap-table.min.css') }}" rel="stylesheet">
  <link href="{{ url_for_static('static', filename='css/project/project.css') }}" rel="stylesheet">
{% endblock styles %}

{% block body_attribs %}
class="bg-gradient-grey"
{% endblock body_attribs %}

{% block app_content %}
<div class="card shadow container-fluid mt-5">
  <div class="card-body card-body-project-list">
    <h4 class="pt-2">项目列表</h4>
    <div class="btn-toolbar" role="toolbar" id="table-project-toolbar">
      <div class="btn-group mr-2" role="group">
        <button type="button" class="btn btn-primary" id="btn-add-project">新增</button>
      </div>
    </div>
    <table id="table-project-list"></table>
  </div>
</div>

<div class="modal fade" id="modal-add-project" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">新增项目</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="input-add-project-name">项目名称</label>
          <input type="text" class="form-control" id="input-add-project-name" placeholder="输入项目名称">
        </div>
        <div class="form-group">
          <label for="input-add-project-description">项目描述</label>
          <input type="text" class="form-control" id="input-add-project-description" placeholder="输入项目描述">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button id="btn-save-add-project" type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-modify-project" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">修改项目</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="text" class="form-control" id="input-modify-project-id" disabled style="display: none"/>
        <div class="form-group">
          <label for="input-modify-project-name">项目名称</label>
          <input type="text" class="form-control" id="input-modify-project-name" placeholder="输入项目名称">
        </div>
        <div class="form-group">
          <label for="input-modify-project-description">项目描述</label>
          <input type="text" class="form-control" id="input-modify-project-description" placeholder="输入项目描述">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button id="btn-save-modify-project" type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-config-project" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">项目设置</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="text" class="form-control" id="input-config-project-id" placeholder="" disabled style="display: none"/>
        <div class="form-group">
          <label>发生错误终止运行</label>
          <div class="btn-group btn-group-sm" data-toggle="buttons">
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="stop-on-error" id="radio-stop-on-error-yes" autocomplete="off"> 是
            </label>
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="stop-on-error" id="radio-stop-on-error-no" autocomplete="off"> 否
            </label>
          </div>
        </div>
        <div class="form-group">
          <label>执行测试前清除历史HTTPCookie数据</label>
          <div class="btn-group btn-group-sm" data-toggle="buttons">
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="clear-http-cookie" id="radio-clear-http-cookie-yes" autocomplete="off"> 是
            </label>
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="clear-http-cookie" id="radio-clear-http-cookie-no" autocomplete="off"> 否
            </label>
          </div>
        </div>
        <div class="form-group">
          <label>钉钉通知</label>
          <div class="btn-group btn-group-sm" data-toggle="buttons">
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="ding-talk-notify" id="radio-ding-talk-notify-yes" autocomplete="off"> 是
            </label>
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="ding-talk-notify" id="radio-ding-talk-notify-no" autocomplete="off"> 否
            </label>
          </div>
        </div>
        <div class="form-group">
          <label>邮件通知</label>
          <div class="btn-group btn-group-sm" data-toggle="buttons">
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="email-notify" id="radio-email-notify-yes" autocomplete="off"> 是
            </label>
            <label class="btn btn-outline-secondary btn-sm">
              <input type="radio" name="email-notify" id="radio-email-notify-no" autocomplete="off"> 否
            </label>
          </div>
          <div class="collapse" id="email-notify-more-config">
            <div class="card card-body">
              <div class="form-group">
                <label class="small">发送条件<i class="fas fa-question-circle text-secondary" data-toggle="tooltip" data-placement="top" title="[默认]-不论执行结果如何都会发送 [错误/失败]-只有在执行错误或失败时发送"></i></label>
                <div class="btn-group btn-group-sm" data-toggle="buttons">
                  <label class="btn btn-outline-secondary btn-sm">
                    <input type="radio" name="email-notify-condition" id="radio-email-notify-when-default" autocomplete="off"> 默认
                  </label>
                  <label class="btn btn-outline-secondary btn-sm">
                    <input type="radio" name="email-notify-condition" id="radio-email-notify-when-failure-or-error" autocomplete="off"> 错误/失败
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="input-group input-group-sm mt-2">
          <label>定时任务</label>
          <div class="input-group-prepend">
            <label class="input-group-text" for="checkbox-use-scheduler">是否启用</label>
          </div>
          <div class="input-group-prepend">
            <div class="input-group-text">
              <input type="checkbox" id="checkbox-use-scheduler"/>
            </div>
          </div>
          <div class="input-group-append">
            <span class="input-group-text">cron表达式
              <a href="https://apscheduler.readthedocs.io/en/stable/modules/triggers/cron.html#expression-types" target="_blank" data-toggle="tooltip" data-placement="top" title="点击查看帮助文档">
                <i class="fas fa-question-circle text-secondary"></i>
              </a>
            </span>
          </div>
          <input id="input-scheduler-cron" type="text" class="form-control" placeholder="示例: 30 1 * * * (每天1:30执行)" value="">
          <button class="btn btn-outline-secondary btn-sm" id="btn-test-crontab">测试一下</button>
        </div>
        <small class="text-success crontab"></small>
        <small class="text-danger crontab"></small>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button id="btn-save-config-project" type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}


{% block scripts %}
  {{ super() }}
  <script src="{{ url_for_static('static', filename='plugins/bootstrap-table/bootstrap-table.min.js') }}"></script>
  <script src="{{ url_for_static('static', filename='plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js') }}"></script>
  <script src="{{ url_for_static('static', filename='js/project/project.js') }}"></script>
{% endblock %}